/*
 * @Description: 问题反馈
 * @Author: Caroline
 * @Date: 2024-06-22 18:49:03
 * @LastEditTime: 2024-06-23 00:58:37
 * @LastEditors: Caroline
 * @FilePath: \education-offical--web\src\components\Feedback\index.jsx
 */
import React, { useRef, useState, useEffect } from "react";
import { Modal, Form, Input, message } from "antd";
import baseService from "@service/baseService";
import DraggableButton from "../DraggableButton";

const Feedback = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const [messageApi, contextHolder] = message.useMessage();
  const [form] = Form.useForm();

  const onSubmit = () => {
    form
      .validateFields()
      .then(async (values) => {
        // 在这里可以调用onFinish处理表单数据
        try {
          await baseService.post(`/edu/problem/feedback`, values);
          messageApi.open({
            type: "success",
            content: "提交成功",
          });
          onClose();
        } catch (err) {
          console.log("提交反馈异常", err);
        }
      })
      .catch((errorInfo) => {
        console.log("Failed:", errorInfo);
        // 在这里可以调用onFinishFailed处理校验失败情况
      });
  };

  const onClose = () => {
    form.resetFields();
    setIsModalOpen(false);
  };

  return (
    <>
      {contextHolder}
      <DraggableButton onClick={showModal} />
      <Modal
        title="问题反馈"
        okText="提交"
        open={isModalOpen}
        onOk={onSubmit}
        onCancel={onClose}
      >
        <Form
          form={form}
          labelCol={{
            span: 4,
          }}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[
              {
                required: true,
                message: "请输入标题",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item label="问题描述" name="content">
            <Input.TextArea rows={4} placeholder="请输入..." />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default Feedback;
